import React, { Component } from 'react'
import Han from "../../components"
import {connect} from 'react-redux'
const {Header,Button,Input,Text,Textarea,Icon} = Han

export default connect(store=>{
        const {name,sex,cardType,card,birthDay} = store.my;
        return { name,sex,cardType,card,birthDay}
    })(class Health extends Component {

    state={
        phone:'',
        city:'',
        address:"",
        personType:"stayLong",
        stayType:"home",
        symptomType:["fever"],
        symptom:"",
        temperature:"no",
        recentTrip:[],

        personOptions :{stayLong:"来京人员",stayShort:"返京人员"},
        stayOptions :{home:"居家自住",rent:"租住",live:"投靠",hotel:"酒店",other:"其他"},
        symptomOptions : {fever:"发热",weak:"乏力",hoose:"干咳",diarrhea:"腹泻",difficultBreathing:"呼吸困难"},
    }

     // 收集数据
    collection =()=> {
        const { phone, city, address, personType, stayType, symptomType, symptom, temperature,recentTrip} = this.state;
        let collectionData = {
            user:localStorage.user,
            submitDate:new Date().getTime(),
            phone,
            city, 
            address,
            personType,
            stayType,
            symptomType,
            symptom,
            temperature,
            recentTrip
        }
        return collectionData
       
    }

    submit = ()=>{
        const {$httpReq,$api} = this
        // 调用接口提交数据
        $httpReq($api.HEALTH_SUBMIT({collectionData:this.collection()}),res=>{
            localStorage.removeItem('saveData')
            this.props.history.push('/record')
        })
    }

    // 跳到行程添加
    addTrip = item =>{

        localStorage.setItem('saveData',JSON.stringify(this.collection()))
        this.props.history.push({pathname:'/trip',state:item})
    }

    // 多选框添加/取消值
    setSymptomType = value=>{
        const {symptomType} = this.state;
        symptomType.includes(value)?symptomType.splice(symptomType.indexOf(value),1):symptomType.push(value);
        this.setState({symptomType})
    }

    // 删除行程

    tripDelete = id =>{
        const {recentTrip} = this.state
        let index = recentTrip.findIndex(item=>item.tripId === id)
        recentTrip.splice(index,1)
        this.setState({recentTrip})
    }
    
    render() {

        const {name,sex,cardType,card,birthDay} = this.props;

        const { phone, city, address, personType, stayType, symptomType, symptom, temperature,recentTrip,personOptions,stayOptions,symptomOptions} = this.state
        console.log(recentTrip)
        return (
            <div className="health">
                {/*返回头  */}
                <Header title="健康自查上报"/>

                <div className="han_type">基本信息</div>

                <Text label="姓名" value={name} btnShow={false} />
                <Text label="性别" value={sex} btnShow={false} />
                <Text label="证件类型" value={cardType} btnShow={false} />
                <Text label="证件号" value={card} btnShow={false} />
                <Text label="出生日期" value={birthDay} btnShow={false} />


                <Input label="手机号" value={phone} change={phone=>this.setState({phone})}/>

                <Text label="城市选择" value={city} btnShow={true} click={()=>console.log('点击了城市选择')}/>

                <Input label="详细地址" value={address} change={address=>this.setState({address})}/>

                <div className="han_type">人员类型</div>
                <div className="han_check_out">
                    {
                        Object.keys(personOptions).map(item=>{
                            return <div className="han_check" key={item}>
                                <input type="radio" name="personSelect" value={item} checked={personType===item}  onChange={e=>this.setState({personType:e.target.value})}/>
                                <span>{personOptions[item]}</span>
                            </div>
                        })
                    }
                </div>

                <div className="han_type">居住属性</div>
                <div className="han_check_out">
                    {
                        Object.keys(stayOptions).map(item=>{
                            return <div className="han_check" key={item}>
                                <input type="radio" name="staySelect" value={item} checked={stayType===item}  onChange={e=>this.setState({stayType:e.target.value})}/>
                                <span>{stayOptions[item]}</span>
                            </div>
                        })
                    }
                </div>

                <div className="han_type">是否有如下症状</div>
                <div className="han_check_out">
                    {
                        Object.keys(symptomOptions).map(item=>{
                            return <div className="han_check" key={item}>
                                <input type="checkbox" name="symptomSelect" value={item} checked={symptomType.includes(item)}  onChange={e=>this.setSymptomType(e.target.value)}/>
                                <span>{symptomOptions[item]}</span>
                            </div>
                        })
                    }
                </div>
                

                <Textarea label="详细描述" value={symptom} change={symptom=>this.setState({symptom})}/>

                <div className="han_open">
                    <span>腋下体温是否超过37°</span>

                    <div className={["han_out_circle",temperature==="yes"?"blue":""].join(' ')} onClick={()=>this.setState({temperature:temperature==="yes"?"no":"yes"})}>
                        <b></b>
                    </div>

                </div>


                <div className="han_type">近期行程</div>
                
                <div className="add_trip">
                    <p>2020年1月1日起本市以外行程</p>
                    <div onClick={()=>this.addTrip()}><Icon iconName="add"/><strong>添加行程</strong></div>
                </div>
                {/* 行程列表 */}
                <div>
                    {
                        recentTrip&&recentTrip.map(item=>{
                            return <div key={item.tripId}>
                                <span>{item.endPlace}</span>
                                <button onClick={()=>this.addTrip(item)}>编辑</button>
                                <button onClick={()=>this.tripDelete(item.tripId)}>删除</button>
                            </div>
                        })
                    }
                </div>

                <div className="readed">
                    <input type="checkbox"/>我已阅知本申报所列事项，并保证以上申报内容正确属实
                </div>


                <Button text="提交" submit={this.submit} />
            </div>
        )
    } 
    
    componentDidMount(){
        // 从本地存储里取数据
        if(localStorage.saveData){
            
            const { phone,city, address,personType,stayType,symptomType,symptom, temperature, recentTrip} =  JSON.parse(localStorage.saveData)
       
            if(!this.props.location.state){
                
                const {tripId} = this.props.location.state

                let index = recentTrip.findIndex(item=>item.tripId === tripId)

                // 编辑
                if(index!==-1){
                    recentTrip[index] = {...this.props.location.state}
                }else{
                     // 添加
                    recentTrip.push(this.props.location.state)
                }
               
                
            }
    
            if(recentTrip[0] === null) recentTrip.splice(0,1)
           
            this.setState({phone,city,address,personType,stayType,symptomType,symptom,temperature,recentTrip})
    
        }
        
        
    }
}) 